<!--
 * @Author: Xujianchen
 * @Date: 2024-06-24 15:26:44
 * @LastEditors: Xujianchen
 * @LastEditTime: 2025-01-18 15:49:22
 * @Description: 二次封装el-dialog
-->
<template>
  <el-dialog
    :model-value="modelValue"
    :show-close="false"
    :fullscreen="isFullscreen"
    :width="dialogWidth"
    :modal-class="modalClass"
    v-bind="$attrs"
    @close="close"
    @open="emit('open')"
  >
    <template #header>
      <slot name="header">
        <span class="title">{{ title }}</span>
      </slot>
      <div class="header-btn">
        <icon
          v-if="fullscreen"
          :name="isFullscreen ? 'BottomRight' : 'FullScreen'"
          @click="isFullscreen = !isFullscreen"
        />
        <icon v-if="showClose" name="Close" @click="close" />
      </div>
    </template>
    <slot v-if="!scrollable"></slot>
    <el-scrollbar v-else :height="height" :max-height="height" noresize>
      <slot></slot>
    </el-scrollbar>
    <template #footer>
      <slot v-if="showFooter" name="footer">
        <el-button @click="close">{{ cancelText }}</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup name="Modal">
import { ModalProps } from './props'
import { ModalEmits } from './emit'
import useConfigStore from '@/store/modules/config'

defineOptions({ name: 'Modal' })
const modelValue = defineModel({ type: Boolean, default: false })
const props = defineProps(ModalProps)
const emit = defineEmits(ModalEmits)

const configStore = useConfigStore()

const isFullscreen = ref(props.fullscreen)

const dialogWidth = computed(() => `${configStore.isMobile ? 90 : 50}%`)
const globalBlur = computed(() => configStore.globalConfig.isBlur)
const modalClass = computed(() => {
  const p = props
  if (globalBlur.value && p.followConfigBlur) return p.modalClass
  if (!p.followConfigBlur && !p.isBlur) return null

  return p.isBlur ? p.modalClass : null
})

function close() {
  modelValue.value = false
  emit('close')
}
</script>

<style lang="scss" scoped>
// :deep(.el-dialog__header) {
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
// }

.title {
  font-size: $font-size-large;
}

.header-btn {
  float: right;
  // position: absolute;
  // top: var(--el-dialog-padding-primary);
  // right: var(--el-dialog-padding-primary);

  .el-icon {
    margin-left: $space-small;
    font-size: $font-size-large;
    cursor: pointer;
  }
}
</style>
